import {uSelectDevExceptionReport} from '@/api/dataOverview'
import {CCard} from '@/components/card'
import {DeviceName, IconImg} from '@/components/image'
import RollerDigital from '@/components/rollerDigital'
import {SplitLine} from '@/components/splitLine'
import {CnMediumSpan, CnNormalP, CnNormalSpan} from '@/components/text'
import useLoading from '@/hooks/loading'
import {getUserId} from '@/libs/auth'
import {toExceptionManagement} from '@/libs/pageRedirect'
import {eventTypeName2ImageName} from '@/libs/text2ImgName'

const AlarmMsgCardLayout = defineComponent({
  props: {
    loading: Boolean
  },
  setup(props, {slots}) {
    return () => (
      <CCard
        id='CBC-AlarmMsgCard'
        title='异常警报'
        class='col-span-1 w-full h-280 rounded-4 bg-white overflow-hidden'
        loading={props.loading}
        skeletonProps={{paragraph: {rows: 6}}}
      >
        <div class='w-full h-full flex flex-col'>{slots.default?.()}</div>
      </CCard>
    )
  }
})

export const AlarmMsgCard = defineComponent({
  setup(props, ctx) {
    const {startLoading, closeLoading, loading, isSuccess} = useLoading()

    const state = reactive<{
      alarm: DataOverview.AlarmDevLog | undefined
    }>({
      alarm: undefined
    })

    function getAlarm() {
      const userId = getUserId()
      if (!userId) return
      startLoading()

      uSelectDevExceptionReport({userId})
        .then(res => {
          state.alarm = res.data
          closeLoading(true)
        })
        .catch(err => {
          closeLoading(false)
        })
    }

    onMounted(() => {
      getAlarm()
    })

    return () =>
      loading.value ? (
        <AlarmMsgCardLoading></AlarmMsgCardLoading>
      ) : isSuccess.value ? (
        <AlarmMsgCardLayout>
          <div class='w-full h-full flex flex-col justify-around'>
            <div class='w-full h-48 flex items-center'>
              <IconImg imgName='danger-light' class='w-48 h-full mr-16'></IconImg>
              <div class='h-full flex flex-col'>
                <p class='flex-1 h-31'>
                  <RollerDigital
                    class='text-24 mx-6'
                    endVal={state.alarm?.devLogCount || 0}
                  ></RollerDigital>
                  <CnNormalSpan class='text-12'>次</CnNormalSpan>
                </p>
                <CnNormalP class='flex-1'>警报通知</CnNormalP>
              </div>
            </div>
            <SplitLine class='w-full h-1 p-0 mt-14'></SplitLine>
            <div class='w-full flex-1 max-h-96 mt-4 overflow-y-auto px-4'>
              {state.alarm?.devLogList.map(item => (
                <div class='h-32'>
                  <div class='h-full flex justify-between items-center'>
                    {item.devName ? (
                      <DeviceName class='flex-1'>{item.devName}</DeviceName>
                    ) : (
                      <CnMediumSpan class='flex-1'>未设置设备名称</CnMediumSpan>
                    )}
                    <a-popover
                      class='mx-16 justify-start flex items-center'
                      content={<CnMediumSpan>{item.devLogContent || '无内容'}</CnMediumSpan>}
                      trigger='hover'
                    >
                      <IconImg
                        class='mr-4 w-12 h-12'
                        imgName={eventTypeName2ImageName(item.devEventTypeName)}
                      ></IconImg>
                      <CnNormalSpan>{item.devEventTypeName}</CnNormalSpan>
                    </a-popover>

                    <IconImg class='ml-8 w-12 h-12' imgName='calendar'></IconImg>
                    <CnNormalSpan class='ml-4 text-right'>
                      {item.createTime || '无时间'}
                    </CnNormalSpan>
                  </div>
                </div>
              ))}
            </div>
            <div class='w-full h-28 mt-9'>
              <a-button
                class='rounded-2 bg-primaryLight h-full float-right'
                onClick={() => {
                  toExceptionManagement()
                }}
              >
                <CnNormalSpan class='text-12 text-primary'>查看</CnNormalSpan>
              </a-button>
            </div>
          </div>
        </AlarmMsgCardLayout>
      ) : (
        <AlarmMsgCardEmpty></AlarmMsgCardEmpty>
      )
  }
})

export const AlarmMsgCardEmpty = defineComponent({
  setup() {
    return () => (
      <AlarmMsgCardLayout>
        <div class='w-full h-full flex items-center justify-center'>
          <a-empty description='数据获取失败' />
        </div>
      </AlarmMsgCardLayout>
    )
  }
})

export const AlarmMsgCardLoading = defineComponent({
  setup() {
    return () => <AlarmMsgCardLayout loading={true}></AlarmMsgCardLayout>
  }
})
